<template>
  <view class="info">
    <!-- 基础信息 -->
    <div class="top-bg">
      <div class="topImg">
        <img class="leftText" src="../../static/img/text.png" alt="" />
        <div class="round-box">
          <div class="outer">
            <div class="core"></div>
          </div>
          <img class="shadow" src="../../static/img/infoShadow.png" alt="" />
        </div>
      </div>
      <div class="company-info">
        <p class="company-name">武汉犹新记忆科技有限公司</p>
        <p class="createTime">
          上传时间: <span style="color: #666">2024-6-18</span>
        </p>
        <div class="favorability">
          好感度:
          <up-rate
            :count="5"
            active-color="#fcc12d"
            readonly="false"
            v-model="value"
          ></up-rate>
        </div>
      </div>
    </div>
    <!-- 照片 -->
    <div class="img-box">
      <div class="left-style">
        <div class="left-box"></div>
        <span class="jointlyTitle">相关图片</span>
      </div>
      <div class="img-list">
        <up-image
          class="up-img"
          v-for="item in 4"
          :key="item"
          :show-loading="true"
          src="https://cdn.uviewui.com/uview/album/1.jpg"
          width="150rpx"
          height="150rpx"
        ></up-image>
      </div>
    </div>
    <!-- 评论 -->
    <div class="comment">
      <div class="box-title">
        <div class="left-style">
          <div class="left-box"></div>
          <span class="jointlyTitle">评论</span>
        </div>
        <div style="width: 149rpx">
          <up-button size="mini" type="primary" plain text="说一句" @click="todoSpeak"/>
        </div>
      </div>
      <!-- 评论列表 -->
      <div class="comment-list">
        <div class="content" v-for="item in 10" :key="item">
          <div class="user">
            <div class="avtar"></div>
            <p>评论家</p>
          </div>
          <div class="text">
            本来还想说2200刀还有松下s52x的，结果一看人家套机现在14k都不到。说z63是混合机型的怕不是幽默，750克还不支持无限时，糟糕的视频工作流，残废的log。铁丝都在期待收购red以后新log发布，结果就这？家人们谁懂啊，到底是谁在用尼康视频。
          </div>
        </div>
      </div>
    </div>
	
  </view>
	<!-- 输入弹框 -->
	<u-popup :show="show" mode="bottom" :round="10" @close="close">
		<view class="popup-comment">
			<view class="popup-header">
				<div class="left-box"></div>
				<span class="jointlyTitle">评论</span>
			</view>
			<up-textarea v-model="commentVal" height="85" placeholder="请输入评论内容" count ></up-textarea>
			<up-row customStyle="margin: 20rpx 0">
				<up-col span="6">
					<view class="btn-style">
						<up-button type="primary" text="确定" plain></up-button>
					</view>
				</up-col>
				<up-col span="6">
					<view class="btn-style">
						<up-button type="error" text="取消" plain></up-button>
					</view>
				</up-col>
			</up-row>
		</view>
	</u-popup>
</template>

<script setup>
import { ref } from "vue";
const value = ref(4);
// 弹窗
const show = ref(false)
// 评论文本
const commentVal = ref('')

// 说一句
const todoSpeak = () => {
	commentVal.value = ''
	show.value = true
}
const close = () => {
	show.value = false
}
</script>

<style lang="scss" scoped>
.info {
  background-color: rgb(242, 242, 242);
  width: 100%;
  height: 100%;
  // overflow: hidden;
  overflow-y: scroll;
  overflow-x: hidden;

  .top-bg {
    width: 100%;
    height: auto;
    background: linear-gradient(0deg, #b6c9f1 40%, #dde8fb 90%);
    box-sizing: border-box;
    overflow: hidden;
    .topImg {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-right: 30rpx;
      .leftText {
        width: 294rpx;
        height: 99rpx;
        padding: 22rpx 24rpx;
      }
      .round-box {
        width: 79rpx;
        height: 79rpx;
        position: relative;
        .outer {
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background: linear-gradient(-124deg, #b6c9f1, #dde8fb 76%);
          display: flex;
          justify-content: flex-end;
          align-items: flex-start;
          padding-top: 10rpx;
          padding-right: 14rpx;
          box-sizing: border-box;
          position: relative;
          z-index: 1;
          animation: outer 2s infinite;
          @keyframes outer {
            0% {
              transform: translateY(0);
            }
            50% {
              transform: translateY(-8rpx);
            }
            100% {
              transform: translateY(0);
            }
          }
          .core {
            width: 33rpx;
            height: 33rpx;
            border-radius: 50%;
            background: linear-gradient(57deg, #b6c9f1, #dde8fb);
          }
        }
        .shadow {
          width: 102rpx;
          height: 33rpx;
          position: absolute;
          bottom: -22rpx;
          left: 50%;
          transform: translate(-50%, 0);
        }
      }
    }

    .company-info {
      background-color: #fff;
      border-radius: 0rpx 88rpx 0rpx 0rpx;
      padding-top: 35rpx;
      padding-left: 24rpx;
      width: 100%;
      height: 216rpx;
      .company-name {
        font-size: 42rpx;
      }
      .createTime {
        margin: 28rpx 0;
        font-size: 24rpx;
      }
      .favorability {
        font-size: 24rpx;
        display: flex;
        align-items: center;
      }
    }
  }
  .img-box {
    width: 100%;
    height: 233rpx;
    background: #ffffff;
    padding: 15rpx 0;
    padding-left: 24rpx;
    box-sizing: border-box;
    margin: 10rpx 0;

    .left-style {
      display: flex;
      align-items: center;
      .left-box {
        width: 4rpx;
        height: 24rpx;
        background: #b00a0a;
        border-radius: 2rpx 2rpx 2rpx 2rpx;
        margin-right: 6rpx;
      }
    }
    .jointlyTitle {
      font-size: 30rpx;
    }
    .img-list {
      width: 95%;
      height: calc(100% - 24rpx);
      display: flex;
      align-items: center;
      justify-content: space-between;
      ::v-deep .u-image__image {
        border-radius: 10rpx !important;
      }
    }
  }
  .comment {
    width: 100%;
    height: 100%;
    padding: 15rpx 0;
    padding-left: 24rpx;
    padding-right: 34rpx;
    background-color: #fff;
    box-sizing: border-box;
    .comment-list {
      height: auto;
      .content {
        width: 100%;
        margin: 28rpx 0;
        .user {
          display: flex;
          .avtar {
            width: 50rpx;
            height: 50rpx;
            border-radius: 50%;
            background: #f2f2f2;
            margin-right: 10rpx;
          }
        }
        .text {
          background: #f2f2f2;
          border-radius: 5px;
          padding: 14rpx;
          box-sizing: border-box;
          margin-top: 15rpx;
          text-indent: 1rem;
          font-size: 20rpx;
          color: #525252;
          line-height: 32rpx;
          text-align: justify;
          margin-left: 54rpx;
        }
      }
    }
  }
}
.box-title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 11rpx;
  .left-style {
    display: flex;
    align-items: center;
    font-size: 30rpx;
    .left-box {
      width: 4rpx;
      height: 24rpx;
      background: #b00a0a;
      border-radius: 2rpx 2rpx 2rpx 2rpx;
      margin-right: 6rpx;
    }
  }
}

.popup-comment{
	height: 340rpx;
	margin: 20rpx;
	.popup-header{
		display: flex;
		align-items: center;
		font-size: 30rpx;
		margin-bottom: 10rpx;
		.left-box {
		  width: 4rpx;
		  height: 24rpx;
		  background: #b00a0a;
		  border-radius: 2rpx 2rpx 2rpx 2rpx;
		  margin-right: 6rpx;
		}
	}
	.btn-style{
		width: 80%;
		height: 40rpx;
		margin: 0 auto;
	}
}
</style>